<template>
  <div class="pageWrap">
    <div class="proWrap">
      <div class="inputWrap">
        <h2 class="title">
          <strong>
            输入：
          </strong>
          <a-space>
            <a-button type="primary" ghost danger size="small" @click="handleClear('input')">清空输入框</a-button>
            <a-button type="primary" ghost size="small" @click="handleCopy('input')">复制</a-button>
          </a-space>
        </h2>
        <a-textarea v-model:value="data.inputValue" :rows="20" placeholder="请输入或者粘贴需要处理的文本" />
      </div>
      <div class="hWrap">
        <LeftOutlined @click="handleLeft"></LeftOutlined>
        <!-- <RightOutlined></RightOutlined> -->
      </div>
      <div class="outputWrap">
        <h2 class="title">
          <strong>
            输出：
          </strong>
          <a-button type="primary" size="small" @click="handleCopy('output')">复制</a-button>
        </h2>
        <a-textarea v-model:value="data.outputValue" :rows="20" placeholder="处理结果" />
      </div>
    </div>
    <div class="btnWrap">
      <a-button type="primary" ghost @click="handleProcess('Base64Encode')">Base64 Encode</a-button>
      <a-button type="primary" ghost @click="handleProcess('Base64Decode')">Base64 Decode</a-button>
      <a-divider type="vertical" style="height: 30px; background-color: #eee;"/>
      <a-button type="primary" ghost @click="handleProcess('UrlEncodeUtf8')">Url Encode (utf-8)</a-button>
      <a-button type="primary" ghost @click="handleProcess('UrlDecodeUtf8')">Url Decode (utf-8)</a-button>
      <a-divider type="vertical" style="height: 30px; background-color: #eee;"/>
      <a-button type="primary" ghost @click="handleProcess('UrlEncodeGbk')">Url Encode (gbk)</a-button>
      <a-button type="primary" ghost @click="handleProcess('UrlDecodeGbk')">Url Decode (gbk)</a-button>
      <a-divider type="vertical" style="height: 30px; background-color: #eee;"/>
      <a-button type="primary" ghost @click="handleProcess('AddSlash')">Add Slash</a-button>
      <a-button type="primary" ghost @click="handleProcess('StripSlash')">Strip Slash</a-button>
      <a-divider type="vertical" style="height: 30px; background-color: #eee;"/>
      <a-button type="primary" ghost @click="handleProcess('EncodeHtml')">Encode Html Special Chars</a-button>
      <a-button type="primary" ghost @click="handleProcess('DecodeHtml')">Decode Html Special Chars</a-button>
      <a-divider type="vertical" style="height: 30px; background-color: #eee;"/>
      <a-button type="primary" ghost @click="handleProcess('MD5')">MD5</a-button>
    </div>
    <div class="descWrap">
      <h3>简介</h3>
      <p>
        base64 编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。
      </p>
      <p>
        url编码解码，又叫百分号编码，是统一资源定位(URL)编码方式。URL地址（常说网址）规定了常用地数字，字母可以直接使用，另外一批作为特殊用户字符也可以直接用（/,:@等），剩下的其它所有字符必须通过%xx编码处理。 现在已经成为一种规范了，基本所有程序语言都有这种编码，如js：有encodeURI、encodeURIComponent，PHP有 urlencode、urldecode等。编码方法很简单，在该字节ascii码的的16进制字符前面加%. 如 空格字符，ascii码是32，对应16进制是'20'，那么urlencode编码结果是:%20。
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { encode, decode } from 'js-base64'
import {
  addslashes,
  stripslashes,
  htmlspecialchars,
  htmldecodespecialchars,
  urlEncodeGbk,
  urlDecodeGbk
} from '../../service/index.js'
import { MD5 } from 'crypto-js'

import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

const data = reactive({
  inputValue: '',
  outputValue: ''
})

const handleProcess = (type) => {
  if (data.inputValue === '') {
    message.warning('-。- 、呃呃，貌似没有输入呢~')
    return
  }
  switch (type) {
    case 'Base64Encode':
      console.log(`🚀 ~ handleProcess ~ inputValue.value:`, data.inputValue)
      data.outputValue = encode(data.inputValue)
      console.log(`🚀 ~ handleProcess ~ data:`, data)
      break
    case 'Base64Decode':
      data.outputValue = decode(data.inputValue)
      break
    case 'UrlEncodeUtf8':
      data.outputValue = encodeURIComponent(data.inputValue)
      break
    case 'UrlDecodeUtf8':
      data.outputValue = decodeURIComponent(data.inputValue)
      break
    case 'UrlEncodeGbk':
      data.outputValue = urlEncodeGbk(data.inputValue)
      break
    case 'UrlDecodeGbk':
      data.outputValue = urlDecodeGbk(data.inputValue)
      break
    case 'AddSlash':
      data.outputValue = addslashes(data.inputValue)
      break
    case 'StripSlash':
      data.outputValue = stripslashes(data.inputValue)
      break
    case 'EncodeHtml':
      data.outputValue = htmlspecialchars(data.inputValue)
      break
    case 'DecodeHtml':
      data.outputValue = htmldecodespecialchars(data.inputValue)
      break
    case 'MD5':
      data.outputValue = MD5(data.inputValue)
  }
}

// 将输出值转移到输入值
const handleLeft = () => {
  data.inputValue = data.outputValue
  data.outputValue = ''
}

// 复制
const handleCopy = async (type) => {
  try {
    let textToCopy = ''
    if (type === 'input') {
      if (data.inputValue === '') {
        message.warning('-。- 、呃呃，貌似没有输入呢~')
        return
      }
      textToCopy = data.inputValue
    } else if (type === 'output') {
      if (data.outputValue === '') {
        message.warning('-。- 、呃呃，貌似没有处理结果呢~')
        return
      }
      textToCopy = data.outputValue
    }
    await navigator.clipboard.writeText(textToCopy)
    message.success(`文本已复制到剪贴板`)
  } catch (error) {
    message.error(`复制到剪贴板失败：${error}`)
  }
}

// 清空
const handleClear = () => {
  data.inputValue = ''
  data.outputValue = ''
}

</script>

<style lang="scss" scoped>
.pageWrap{
  .proWrap{
    margin-bottom: 12px;
    display: flex;
    gap: 12px;
    .inputWrap,
    .outputWrap{
      flex: 1;
      .title{
        display: flex;
        strong{
          flex: 1;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
    .hWrap{
      display: flex;
      flex-direction: column;
      width: 24px;
      padding-top: 220px;
      .anticon{
        display: block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        background-color: #1890ff;
        margin-bottom: 12px;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
      }
    }
  }
  .btnWrap{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .descWrap{
    margin-top: 16px;
    h3{
      font-size: 14px;
      font-weight: bold;
    }
    p{
      font-size: 14px;
      color: #666;
      line-height: 1.6em;
      text-indent: 2em;
    }
  }
}
</style>